<template>
  <el-row justify="center">
    <el-col :span="15">
      <h1 id="用餐需求">用餐需求</h1>
      <el-form :model="needsForm" label-width="100px" label-position="right">
        <el-form-item label="用餐人数" v-if="!editable">
          {{people}}
        </el-form-item>
        <el-form-item label="用餐次数" v-if="!editable">
          {{times}}
        </el-form-item>
        <el-form-item label="用餐人次" v-if="editable">
          <el-table :data="needsForm.detailList" border style="width: 100%" header-cell-class-name="table-header">
            <el-table-column
                prop="type"
                align="center"
                label="用餐类型"
                :resizable="false">
            </el-table-column>
            <el-table-column
                align="center"
                label="用餐人数"
                :resizable="false">
              <template v-slot:default="scope">
                <template v-if="editable">
                  <edit-text v-model="scope.row.people"></edit-text>
                </template>
                <template v-else>
                  {{scope.row.people}}
                </template>
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="用餐次数"
                :resizable="false">
              <template v-slot:default="scope">
                <template v-if="editable">
                  <edit-text v-model="scope.row.times"></edit-text>
                </template>
                <template v-else>
                  {{scope.row.times}}
                </template>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="用餐需求明细">
          <template v-if="editable">
            <el-input v-model="needsForm.detail" type="textarea" :rows="5" placeholder="请填写用餐明细：含用餐标准、用餐日期、起止时间等具体要求"></el-input>
          </template>
          <template v-else>
            {{needsForm.detail}}
          </template>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
import EditText from "@/components/EditText";
export default {
  name: "FoodNeedsForm",
  components:{EditText},
  props: {
    modelValue:Object,
    editable:Boolean
  },
  emits: ['update:modelValue'],
  data(){
    return{

    }
  },
  computed:{
    needsForm:{
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    },
    people(){
      let str = '';
      for(let index = 0;index < this.needsForm.detailList.length; index++){
        let info = this.needsForm.detailList[index];
        str += info.type + info.people+'人';
        if(index < this.needsForm.detailList.length)
          str+=','
      }
      return str;
    },
    times(){
      let str = '';
      for(let index = 0;index < this.needsForm.detailList.length; index++){
        let info = this.needsForm.detailList[index];
        str +=  info.times+info.type+' ';
      }
      return str;
    }
  }
}
</script>

<style scoped>

</style>